{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% block extralinks %}
<style>
  .form-group label {
    font-weight: 800;
  }
</style>
{% endblock %}
{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a class="primary_btn" href="{% url 'cases:add_case' %}"><i class="fa fa-plus"></i> Add New
          Case</a></span>
    </div>
  </div>
  <div class="filter_row list_filter_row row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="cases_filter" method="POST" action="">
            <div class="card-body">
              <div class="card-title">Filters</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="text" class="form-control" placeholder="Name" name="name"
                      value="{{request.POST.name}}">
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Status</label>
                    <select class="form-control" id="id_status" name="status">
                      <option value="">--Status--</option>
                      {% for each_status in case_status %}
                      <option value="{{each_status.0}}" {% if request.POST.status %}
                        {% ifequal each_status.0 request.POST.status %}selected{% endifequal %}{% endif %}>
                        {{each_status.1}} </option>
                      {% endfor%}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Priority</label>
                    <select class="form-control" id="id_priority" name="priority">
                      <option value="">--Priority--</option>
                      {% for each_priority in case_priority %}
                      <option value="{{each_priority.0}}" {% if request.POST.priority %}
                        {% ifequal each_priority.0 request.POST.priority %}selected{% endifequal %}{% endif %}>
                        {{each_priority.1}} </option>
                      {% endfor%}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-3">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Account</label>
                    <select class="form-control" id="id_account" name="account">
                      <option value="">--Select Account--</option>
                      {% for ac in accounts %}
                      <option value="{{ac.id}}" {% ifequal acc ac.id %} selected {% endifequal %}>{{ac.name}}</option>
                      {% endfor %}
                    </select>
                    </select>
                  </div>
                </div>
                <input type="hidden" id="per_page_field" name="per_page">
                <div class="filter_col text-left col-2">
                  <div class="form-group buttons_row text-center">
                    <button class="btn btn-primary save" id="filter_click" type="submit">Search</button>
                    <a href="{% url 'cases:list' %}" id="filter_clear" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="table_container_row row marl ">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="panel-heading-list card-title text-right">
            <span class="total_count float-left">Cases - {% if show_pageitems %}
              {% show_pageitems %}{% else %}{{ cases|length }}{% endif %}</span>
            <span class="filter_toggle ">
              <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
            </span>
          </div>
          <div class="table-responsive">
            <table class="table " id="multiselect">
              <thead>
                {% if cases|length > 0 %}
                <tr>
                  <th width="5%">S.No</th>
                  <th width="20%">Name</th>
                  <th width="20%">Account</th>
                  <th width="10%">Status</th>
                  <th width="10%">Priority</th>
                  <th width="15%">Created On</th>
                  <th width="15%">Actions</th>
                </tr>
                {% endif %}
              </thead>
              <tbody>
                {% if per_page %}
                {% paginate per_page cases %}
                {% else%}
                {% paginate 10 cases%}
                {% endif %}
                {% for case in cases %}
                <tr class="case_row{{case.id}}" style="text-align:center;">
                  <td scope="row">{{ forloop.counter }}</td>
                  <td><a href="#" data-toggle="modal"
                      data-target="#exampleModalCenter_case{{case.id}}">{{ case.name }}</a></td>
                  <td>
                    {% if case.account %}
                    <a href="{% url  'accounts:view_account' case.account.id %}">{{ case.account }}</a>
                    {% else %}
                    No Related Account
                    {% endif %}
                  </td>
                  <td id="status_id{{case.id}}" status="{{case.status}}">{{ case.status }}</td>
                  <td>{{ case.priority }}</td>
                  <td title="{{ case.created_on }}">{{ case.created_on_arrow }}</td>
                  <td class="actions">
                    <a href="{% url 'cases:view_case' case.id %}" class="btn btn-info view" title="View" ><i
                        class="fas fa-eye"></i></a>
                    <a href="{% url 'cases:edit_case' case.id %}" class="btn btn-success edit" title="Edit" ><i
                        class="fas fa-pencil-alt"></i></a>
                    {% if request.user == case.created_by or request.user.role == "ADMIN" or request.user.is_superuser %}
                    <a href="{% url 'cases:remove_case' case.id %}" class="btn btn-danger delete remove_case" title="Delete" ><i
                        class="fas fa-trash-alt"></i></a>
                    {% if case.status != 'Closed' %}
                    <a onclick="close_case({{case.id}}, '{% url 'cases:close_case' %}')" class="btn btn-info" title="Close"><i
                        class="fas fa-times"></i> </a>
                    {% endif %}
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% ifequal cases|length 0 %}
          <h6 class="text-center">No Cases Records Found</h6>
          {% endifequal %}
          <div class="marl row text-center">
            {% show_pages %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


{% for case_record in cases %}

<div class="modal fade" id="exampleModalCenter_case{{case_record.id}}" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">{{ case_record.name }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
        <div class="" id="">
          <div class="">
            <div class="col-md-12" id="">
              <div class="card">
                <div class="card-body" id="datashow" style="margin: 0; padding: 0;">
                  <div class="card-title text-right">
                    <h5>
                      
                      <span class="" style="margin-top: 0px">
                        
                      </span>
                    </h5>
                  </div>
                  <div class="row marl">
                    <div class="col-md-4">
                      <div class="filter_col col-md-12" id="iname">
                        <div class="form-group">
                          <label class="case_field_label" for="id_name" data-name="name">Name</label>
                          <div class="case_field" id="case_name" data-name="name">{{ case_record.name }}</div>
                        </div>
                      </div>
                      <div class="filter_col col-md-12">
                        {% if case_record.account %}
                        <div class="form-group">
                          <label class="case_field_label" for="id_account" data-name="name">Account</label>
                          <div class="case_field" id="case_account" data-name="name">{{ case_record.account }}</div>
                        </div>
                        {% endif %}
                      </div>
                      <div class="filter_col col-md-12">
                        {% if case_record.contacts.all %}
                        <div class="form-group">
                          <label class="case_field_label" for="id_contact" data-name="name">Contact</label>
                          <div class="case_field" id="case_contact" data-name="name">
                            {% for contact in case_record.contacts.all %}
                            <div>{{ contact }}</div>
                            {% endfor %}
                          </div>
                        </div>
                        {% endif %}
                      </div>
                      <div class="filter_col col-md-12">
                        {% if case_record.closed_on %}
                        <div class="form-group">
                          <label class="case_field_label" for="id_closedon" data-name="name">Close Date</label>
                          <div class="case_field" id="case_closedon" data-name="name">{{ case_record.closed_on|date }}
                          </div>
                        </div>
                        {% endif %}
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="case_field_label" for="id_status" data-name="name">Status</label>
                          <div class="case_field" id="case_status" data-name="name">{{ case_record.status }}</div>
                        </div>
                      </div>
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="case_field_label" for="id_priority" data-name="name">Priority</label>
                          <div class="case_field" id="case_priority" data-name="name">{{ case_record.priority }}</div>
                        </div>
                      </div>
                      <div class="filter_col col-md-12">
                        {% if case_record.case_type %}
                        <div class="form-group">
                          <label class="case_field_label" for="id_case_type" data-name="name">Type of Case</label>
                          <div class="case_field" id="case_case_type" data-name="name">{{ case_record.case_type }}</div>
                        </div>
                        {% endif %}
                      </div>
                    </div>
                    <div class="col-md-4">
                    </div>
                    <div class="col-md-12">
                      {% if case_record.description %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="case_field_label" for="id_description" data-name="name">Description</label>
                          <div class="case_field" id="case_description" data-name="name">{{ case_record.description }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      <div class="created_information">
                        Created by <b>{{ case_record.created_by }}</b> created on <b title="{{ case_record.created_on }}">{{ case_record.created_on_arrow }}</b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
  </div>
</div>


{% endfor %}



{% endblock %}
{% block js_block %}
<script type="text/javascript">
  function close_case(x, url) {
    var stat = $("#status_id" + x).text()
    if (stat === "Closed") {
      alert("Case Already Closed")
    }
    else {
      $.post(url, {
        "case_id": x
      }, function (data) {
        location.reload();
      })
    }
  }

  $(document).ready(function () {
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
  });
  $('#id_account').select2();


  search = "{{search}}"

  if (search == 'True') {
    $(".list_filter_row").show();
  }

  $('.remove_case').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

  $("a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#cases_filter').attr("action", $(this).attr("href"));
    $('#cases_filter').submit();
  });
</script>
{% endblock js_block %}